<template>
	<view class="container">
		<!-- 分段控制组件 -->
		<view class="segmented-control">
			<!-- <view :class="{'active': current === 0}" @click="current = 0">关注</view> -->
			<view :class="{'active': current === 0}" @click="current = 0">推荐</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y scroll-with-animation style="height: 100%;">
			<!-- 关注的帖子 -->
			<!-- <view v-if="current === 0" class="post" v-for="(post, index) in posts" :key="post.id">
				<view class="post-header">
					<image class="avatar" :src="post.avatar"></image>
					<view class="username">{{ post.username }}</view>
				</view>
				<view class="post-content">
					<view class="post-images">
						<image v-for="(image, index) in post.images" :key="index" :src="image" class="post-image"
							mode="widthFix"></image>
					</view>
					<view v-html="post.content"></view>
				</view>
				<view class="post-footer">
					<view class="action-buttons">
						<view class="like-button" @click="handleLike(post.id)">
							<img src="../../static/like-icon.png" alt="Like" class="icon" />
							<text>{{ post.likes }}</text>
						</view>
						<view class="comment-button" @click="handleComment(post.id)">
							<img src="../../static/comment-icon.png" alt="Comment" class="icon" />
							<text>{{ post.comments }}</text>
						</view>
					</view>
				</view>
			</view> -->

			<!-- 推荐的帖子 -->
			<view v-if="current === 0" class="post" v-for="(post, index) in recommendedPosts" :key="post.id">
				<view class="post-header">
					<image class="avatar" :src="post.avatar"></image>
					<view class="username">{{ post.nickName }}</view>
				</view>
				<view class="post-content">
					<view class="post-images">
						<image :src="post.communityPost.imgUrl" class="post-image" mode="widthFix"></image>
					</view>
					<view v-html="post.communityPost.content"></view>
				</view>
				<view class="post-footer">
					<view class="action-buttons">
						<view class="like-button" @click="handleLike(recommendedPosts[index])">
							<img src="../../static/like-icon.png" alt="Like" class="icon" />
							<text>{{ post.communityPost.goods }}</text>
						</view>
						<view class="comment-button" @click="handleComment(recommendedPosts[index])">
							<img src="../../static/comment-icon.png" alt="Comment" class="icon" />
							<text>{{ post.communityPost.commentNumber }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		communityList,
		likeCommunity
	} from "@/api/community.js";
	import config from '@/config'
	export default {
		data() {
			return {
				current: 0,
				posts: [{
						id: 1,
						username: '用户0936TK12',
						avatar: '/static/communityP1.jpg',
						content: `挥洒汗水诠释快乐，阳光体育源于热爱，体力无限源于活力，向积极出发，收获健康与喜悦！`,
						likes: 3,
						comments: 3,
						images: ['/static/communityR4.jpg']
					},
					{
						id: 2,
						username: '用户331YH11',
						avatar: '/static/communityP2.jpg',
						content: '跑步是一种修行，心情不好，能跑没烦恼，推荐给大家！',
						likes: 2,
						comments: 3,
						images: []
					},
					{
						id: 3,
						username: '用户18H423',
						avatar: '/static/communityP3.jpg',
						content: '昨晚吃多了，今天目前为止只喝了杯咖啡。',
						likes: 2,
						comments: 3,
						images: ['/static/communityPC3.jpg']
					},
					{
						id: 4,
						username: '用户LK734GB',
						avatar: '/static/communityP4.jpg',
						content: '最近偷懒了，明显感觉第二年没刚开始健身强，还是要坚持下去，一路走来真不容易，希望所有健身人都可以找到适合自己的健身节奏。',
						likes: 7,
						comments: 3,
						images: ['/static/communityR7.jpg']
					},
					{
						id: 5,
						username: '用户098QV2',
						avatar: '/static/communityP5.jpg',
						content: '春乏夏困的时间已经过去了，开启夏季的晨跑打卡，同样的时间、地点，不走重复路，不喜欢在一条线上来回奔跑，但愿意每天感受不同的风景；春天的气温，还没有夏日的炎热，冲刺吧，不追求速度、不追求距离，把这个习惯坚持下去就行了！',
						likes: 5,
						comments: 3,
						images: []
					}
				],
				recommendedPosts: [{
						id: 6,
						username: '推荐用户001',
						avatar: '/static/communityR1.jpg',
						content: '这是推荐内容1：推荐用户分享的健康生活小技巧。',
						likes: 5,
						comments: 3,
						images: []
					},
					{
						id: 7,
						username: '推荐用户002',
						avatar: '/static/communityR2.jpg',
						content: '这是推荐内容2：推荐用户分享的健身心得。',
						likes: 8,
						comments: 3,
						images: ['/static/communityPC2.jpg']
					},
					{
						id: 8,
						username: '推荐用户003',
						avatar: '/static/communityR3.jpg',
						content: '这是推荐内容3：推荐用户分享的营养饮食建议。',
						likes: 12,
						comments: 3,
						images: []
					},
					{
						id: 9,
						username: '推荐用户004',
						avatar: '/static/communityR4.jpg',
						content: '这是推荐内容4：推荐用户分享的运动装备评测。',
						likes: 9,
						comments: 3,
						images: []
					},
					{
						id: 10,
						username: '推荐用户005',
						avatar: '/static/communityR5.jpg',
						content: '这是推荐内容5：推荐用户分享的户外活动经验。',
						likes: 14,
						comments: 3,
						images: []
					},
					{
						id: 11,
						username: '推荐用户006',
						avatar: '/static/communityR6.jpg',
						content: '这是推荐内容6：推荐用户分享的健康饮食计划。',
						likes: 11,
						comments: 3,
						images: []
					},
					{
						id: 12,
						username: '推荐用户007',
						avatar: '/static/communityR7.jpg',
						content: '这是推荐内容7：推荐用户分享的瑜伽入门指南。',
						likes: 13,
						comments: 3,
						images: []
					}
				],
				selectedPostId: null,
				showOptions: false
			};
		},
		onShow() {
			this.getCommunityList()
		},
		methods: {
			getCommunityList() {
				const data = {

				}
				communityList(data).then(res => {
					console.log(res)
					this.recommendedPosts = res.rows;
					this.recommendedPosts.forEach(item => {
						item.communityPost.imgUrl = config.baseUrl + item.communityPost.img
						item.avatar = config.baseUrl + item.avatar
					})
				})
			},
			handleLike(post) {
				console.log(post)
				uni.showModal({
					title: '确认点赞',
					content: '你确定要点赞该帖子吗？',
					success: (res) => {
						if (res.confirm) {
							// this.toggleLike(postId);
							likeCommunity(post.communityPost.id).then(res => {
								// 2为点赞成功
								if (res.data === 2) {
									this.toggleLike(post.communityPost.id, true)
								} else if (res.data === 1) {
									this.toggleLike(post.communityPost.id, false)
								}
							})
						}
					}
				});
			},
			handleComment(posts) {
				uni.showModal({
					title: '确认评论',
					content: '你确定要评论该帖子吗？',
					success: (res) => {
						if (res.confirm) {
							this.goToComments(posts.communityPost.id);
						}
					}
				});
			},
			goToLikes(postId) {
				uni.navigateTo({
					url: `/pages/Likes/Likes?postId=${postId}`,
					success: () => {
						this.selectedPostId = null;
						this.showOptions = false;
						console.log('成功跳转至点赞页面，帖子ID:', postId);
					},
					fail: (err) => {
						console.error('跳转至点赞页面失败:', err);
						uni.showToast({
							title: '跳转失败，请检查页面配置',
							icon: 'none'
						});
					}
				});
			},
			goToComments(postId) {
				uni.navigateTo({
					url: `/pages/Comments/Comments?postId=${postId}`,
					success: () => {
						this.selectedPostId = null;
						this.showOptions = false;
					},
					fail: (err) => {
						console.error('跳转至评论页面失败:', err);
					}
				});
			},

			toggleLike(postId, like) {
				const post = this.recommendedPosts.find(p => p.communityPost.id === postId);
				if (post) {
					post.communityPost.goods = post.communityPost.goods + (like ? 1 : -1);
					// post.isLiked = !post.isLiked;
					// console.log('更新后的点赞状态:', post.likes, post.isLiked);
					// this.likeCount = this.posts.reduce((acc, p) => acc + (p.isLiked ? 1 : 0), 0);
					// console.log('总点赞数:', this.likeCount);
				} else {
					console.error('未找到对应的帖子，ID:', postId);
					// 可以在这里添加用户提示，告知未找到帖子
					uni.showToast({
						title: '未找到帖子',
						icon: 'none'
					});
				}
			},
			addComment(postId, comment) {
				const MAX_COMMENT_LENGTH = 200; // 新增：评论最大长度
				if (comment.length > MAX_COMMENT_LENGTH) {
					alert(`评论长度不能超过 ${MAX_COMMENT_LENGTH} 个字符！`);
					return;
				}
				const post = this.posts.find(p => p.id === postId);
				if (post && comment.trim() !== '') {
					post.comments.push(comment);
					post.commentsCount++;
					this.newComment = ''; // 清空输入框
				} else {
					alert('评论内容不能为空！');
				}
			}
		},
	}
</script>

<style scoped>
	/* 容器设置 */
	.container {
		display: flex;
		/* 使用flex布局 */
		flex-direction: column;
		/* 子元素垂直排列 */
		height: 100vh;
		/* 占据整个视口高度 */
		background: linear-gradient(to bottom, #e6f7ff, #00F5FF);
		/* 背景使用从浅蓝到深蓝的渐变 */
		box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.05);
		/* 内阴影效果增加深度感 */
	}

	/* 分段控件样式 */
	.segmented-control {
		display: flex;
		/* 使用flex布局 */
		justify-content: space-around;
		/* 均匀分布子元素 */
		background-color: #89dffe;
		/* 白色背景 */
		padding: 10px 0;
		/* 上下内边距 */
		border-radius: 5px;
		/* 圆角效果 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果，使其看起来更加立体 */
	}

	.segmented-control view {
		padding: 8px 16px;
		/* 设置内边距 */
		cursor: pointer;
		/* 鼠标悬停时变为手型 */
		font-size: 16px;
		/* 字体大小 */
		transition: all 0.3s ease;
		/* 平滑过渡效果 */
	}

	.segmented-control view:hover {
		color: #007aff;
		/* 悬停时文字颜色改变 */
	}

	.segmented-control view.active {
		color: #007aff;
		/* 当前选中项文字颜色 */
		border-bottom: 2px solid #007aee;
		/* 底部边框突出显示 */
		font-weight: bold;
		/* 加粗字体 */
	}

	/* 主内容区域 */
	.content {
		flex: 1;
		/* 自动填充剩余空间 */
		overflow-y: auto;
		/* 纵向滚动条 */
		padding: 10px;
		/* 内边距 */
		background-color: #BBFFFF;
		/* 轻微的背景色 */
	}

	/* 帖子卡片 */
	.post {
		margin-bottom: 20px;
		/* 下边距 */
		padding: 15px;
		/* 内边距 */
		background-color: #F0FFFF;
		/* 白色背景 */
		border-radius: 14px;
		/* 圆角效果 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		/* 平滑缩放和阴影变化效果 */
	}

	.post:hover {
		transform: scale(1.02);
		/* 鼠标悬停时稍微放大 */
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
		/* 更大的阴影效果 */
	}

	/* 帖子头部 */
	.post-header {
		display: flex;
		/* 使用flex布局 */
		align-items: center;
		/* 垂直居中对齐 */
		margin-bottom: 10px;
		/* 下边距 */
	}

	.avatar {
		width: 40px;
		/* 头像宽度 */
		height: 40px;
		/* 头像高度 */
		border-radius: 50%;
		/* 圆形头像 */
		margin-right: 10px;
		/* 右边距 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 小阴影效果 */
	}

	.username {
		font-weight: bold;
		/* 加粗字体 */
		font-size: 14px;
		/* 字体大小 */
		color: #333;
		/* 文字颜色 */
	}

	/* 帖子图片 */
	.post-images .post-image {
		width: 110px;
		/* 图片宽度占满容器 */
		max-width: 200px;
		/* 最大宽度限制 */
		height: auto;
		/* 根据比例自动调整高度 */
		margin-bottom: 10px;
		/* 下边距 */
		border-radius: 8px;
		/* 圆角效果 */
		object-fit: cover;
		/* 图片裁剪方式 */
	}

	/* 帖子底部 */
	.post-footer {
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 左右对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		padding: 10px;
		/* 内边距 */
		border-top: 1px solid #ddd;
		/* 上边框 */
		background-color: #f9f9f9;
		/* 轻微的背景色 */
		border-radius: 0 0 12px 12px;
		/* 圆角效果 */
	}

	/* 动作按钮 */
	.action-buttons {
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 左右对齐 */
		width: 100%;
		/* 占满父级宽度 */
	}

	.like-button,
	.comment-button {
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 居中对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		width: 50%;
		/* 占用一半宽度 */
		padding: 8px;
		/* 内边距 */
		border-radius: 8px;
		/* 圆角效果 */
		transition: background-color 0.3s ease;
		/* 平滑过渡背景色 */
	}

	.like-button:hover,
	.comment-button:hover {
		background-color: #e6f7ff;
		/* 鼠标悬停时背景色 */
	}

	.icon {
		width: 24px;
		/* 图标宽度 */
		height: 24px;
		/* 图标高度 */
		margin-right: 5px;
		/* 右边距 */
		color: #F0F8FF;
		/* 图标颜色 */
		transition: color 0.3s ease;
		/* 平滑过渡图标颜色 */
	}

	.like-button:hover .icon,
	.comment-button:hover .icon {
		color: #007aff;
		/* 鼠标悬停时图标颜色 */
	}
</style>